import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input } from 'antd'
import _ from 'loadsh'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import Text from '@components/Text'
import SelectSecretary from '../SelectSecretary'

const { Item } = Form
const layout = { labelCol: { flex: '96px' } }
class StepOneInput extends Component {
  state = {
    keyTitleMap: {},
    secretarySelectorVisible: false,
    secretaryid: ''
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 设置秘书
  setSecretary (o) {
    const c = this.props.formRef.current
    c.setFieldsValue({
      vars: {
        processer_reassign_processerid: o.employeeid,
        processer_reassign_processer: o.employee
      }
    })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  render () {
    const { keyTitleMap, secretarySelectorVisible, secretaryid } = this.state
    const { id } = this.props.caseDetail || {}
    return (
      <div>
        <SelectSecretary caseid={id} visible={secretarySelectorVisible} value={secretaryid} hide={() => this.setState({ secretarySelectorVisible: false })} changeSecretary={o => this.setSecretary(o)} />
        <Line>
          <Cell>
            <Item name={['vars', 'processer_reassign_processerid_original']} noStyle><span /></Item>
            <Item {...layout} name={['vars', 'processer_reassign_processer_original']} label={keyTitleMap.processer_reassign_processer_original}>
              <Text />
            </Item>
          </Cell>
          <Split />
        </Line>
        <Line>
          <Cell>
            <Item name={['vars', 'processer_reassign_processerid']} noStyle><span /></Item>
            <Item {...layout} name={['vars', 'processer_reassign_processer']} label={keyTitleMap.processer_reassign_processer} rules={[{ required: true, message: `${keyTitleMap.processer_reassign_processer}不能为空` }]}>
              <Input placeholder={`请选择${keyTitleMap.processer_reassign_processer}`} readOnly onClick={() => this.setState({ secretarySelectorVisible: true })} />
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

StepOneInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object
}

StepOneInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {}
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(StepOneInput)
